<template>
	<view class="content">
		<view v-if="indexType === 1">
			<view class="top w750">
				<!-- 头像部分 -->
				<view class="avatar dflex alc pl30 posir">
					<image src="../../static/avatar.png" class="userAvatar"></image>
					<view class="pl20 fs32 fw900 color" id="username">{{ username }}</view>
					<view class="dflex alc">
						<view class="pl20 gray fs24 fw500" @click="changeType">切换</view>
						<image
							src="../../static/bottom.png"
							class="pl10 bottom"
							v-if="!type"
							@click="changeType"
						></image>
						<image
							src="../../static/top.png"
							class="pl10 top"
							v-if="type"
							@click="changeType"
						></image>
					</view>
					<!-- 切换姓名盒子 -->
					<view class="box textc dflex flexc jcsa" v-show="type">
						<view
							v-for="(item, index) in userList"
							:key="index"
							@click="changeUsername(item.name)"
							class="fs28 color666 fw500"
						>
							{{ item.name }}
						</view>
					</view>
				</view>
				<!-- 牛奶图片部分 -->
				<view class="milk auto mt30">
					<image src="../../static/milk.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- banner部分 -->
			<view class="dflex alc bannerbox">
				<view
					class="banner dflex alc flex1 flexc"
					v-for="(item, index) in bannerList"
					:key="item.id"
					@click="handerBanner(index)"
				>
					<image :src="item.src" mode=""></image>
					<view class="fs28 fw500 color">{{ item.name }}</view>
				</view>
			</view>
			<!-- banner结束 -->
			<view class="pl30 mt40 mb30"><subtitle title="使用记录"></subtitle></view>
			<UseBox v-for="item in 4" :key="item"></UseBox>
			<tabbar :select="0"></tabbar>
		</view>
		<view v-if="indexType === 1"><tabbar :select="0"></tabbar></view>
	</view>
</template>

<script>
import subtitle from '@/components/subtitle/subtitle.vue';
import tabbar from '@/components/tabbar/tabbar.vue';
import UseBox from '@/components/UseBox/UseBox.vue';
export default {
	components: { tabbar, UseBox, subtitle },
	data() {
		return {
			type: false, //学的切换按钮
			username: '',
			userList: [
				{
					id: 1,
					name: '李莉莉'
				},
				{
					id: 2,
					name: '王莉莉'
				},
				{
					id: 3,
					name: '张莉莉'
				}
			],
			indexType: uni.getStorageSync('indexType'), //判断显示的内容
			bannerList: [
				{
					id: 1,
					src: '../../static/banner1.png',
					name: '新卡激活'
				},
				{
					id: 2,
					src: '../../static/banner2.png',
					name: '卡片遗失'
				},
				{
					id: 3,
					src: '../../static/banner3.png',
					name: '在线充值'
				},
				{
					id: 4,
					src: '../../static/banner4.png',
					name: '充值记录'
				},
				{
					id: 5,
					src: '../../static/banner5.png',
					name: '刷卡记录'
				}
			]
		};
	},
	onLoad() {
		// 模拟数据手机号
		uni.setStorageSync('phone', 1888888888);
		uni.setStorageSync('username', '李莉莉');
		this.$nextTick(function() {
			this.username = uni.getStorageSync('username');
		});
		// #ifdef MP-WEIXIN
		uni.setStorageSync('indexType', 1);
		// #endif
		//#ifdef H5
		uni.navigateTo({
			url: '/pagesA/order/order'
		});
		//#endif
	},
	methods: {
		handerBanner(index) {
			if (index === 0) {
				uni.navigateTo({
					url: '/pages/activation/activation'
				});
			} else if (index === 1) {
				uni.navigateTo({
					url: '/pages/lose/lose'
				});
			} else if (index === 2) {
				uni.navigateTo({
					url: '/pages/onlinerecharge/onlinerecharge'
				});
			} else if (index === 3) {
				uni.navigateTo({
					url: '/pages/rechargerecord/rechargerecord'
				});
			} else if (index === 4) {
				uni.navigateTo({
					url: '/pages/swipingrecord/swipingrecord'
				});
			}
		},
		changeType() {
			this.type = !this.type;
		},
		changeUsername(name) {
			uni.setStorageSync('username', name);
			this.$nextTick(function() {
				this.username = uni.getStorageSync('username');
			});
			this.type = false;
		}
	}
};
</script>

<style lang="scss">
.content {
	padding-bottom: 128rpx;
}
.top {
	height: 490rpx;
	background-image: url('https://www.chejingjing.cn/uploads/imgs/20221221/4ab09df60a26fafe12959781aaa3e097.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border-top: 0.1rpx solid transparent;
	.avatar {
		margin-top: 110rpx;
		.userAvatar {
			width: 80rpx;
			height: 80rpx;
		}
		.bottom {
			width: 16rpx;
			height: 16rpx;
			margin-top: 5rpx;
		}
		.top {
			width: 16rpx;
			height: 16rpx;
			margin-top: 5rpx;
		}
	}
	.milk {
		width: 690rpx;
		height: 320rpx;
		image {
			width: 690rpx;
			height: 320rpx;
		}
	}
}
.bannerbox {
	margin-top: 80rpx;
	.banner {
		image {
			width: 110rpx;
			height: 110rpx;
		}
	}
}
.box {
	width: 186rpx;
	height: 170rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(51, 51, 51, 0.25);
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	position: absolute;
	bottom: -150rpx;
	left: 125rpx;
	transition: 1s;
}
</style>
